<template>
  <el-container>
    <el-main>
      <mark-down-dialog :visible.sync="dialogVisible"
                        title="公告详情" :mdContent="notice.content"></mark-down-dialog>
      <el-row :gutter="24">
        <el-col :span="24/cards.length" v-for="card in cards" :key="card.id">
            <el-card shadow="hover">
              {{card.title}}:{{card.res}}
            </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" :style="{marginTop:'20px'}">
        <el-col :span="8">
          <el-card :body-style="{padding:'0px'}">
            <img src="http://element-cn.eleme.io/static/hamburger.50e4091.png" class="image">
            <div :style="{padding:'14px'}">
              <span>{{user.username}}</span>
              <div class="card-bottom clearfix">
                <time class="card-subtitle">{{user.created_at|dateFormat('YYYY-MM-DD')}}</time>
                <el-button type="text" class="card-button">详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16">
          <template>
            <el-table :data="tableData" @row-click="rowClick">
              <el-table-column
                label="公告 ID"
                width="150"
                prop="id">
              </el-table-column>
              <el-table-column label="发布日期" width="200">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span>{{scope.row.created_at|dateFormat('YYYY-MM-DD')}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="标题"
                prop="title">
              </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :style="{marginTop:'20px'}"
              @current-change="listPage" :total="total">
            </el-pagination>
          </template>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {MsgService, NoticeService, PostService} from '@/service/api'
import MarkDownDialog from '@/components/common/MarkDownDialog'

export default {
  components: {
    'mark-down-dialog': MarkDownDialog
  },
  data () {
    return {
      cards: [],
      timeNow: null,
      dialogVisible: false,
      mdContent: null,
      tableData: [],
      total: 0,
      notice: {
        content: ''
      }
    }
  },
  mounted: function () {
    this.cards.push({title: '角色权限', res: this.$store.state.user.role})
    PostService.countMe()
      .then(res => {
        this.cards.push({title: '我的文章', res: res.total})
      })
    MsgService.countMe()
      .then(res => {
        this.cards.push({title: '留言次数', res: res.total})
      })
    this.listPage(1)
  },
  computed: {
    user: function () {
      return this.$store.state.user
    }
  },
  methods: {
    listPage: function (val) {
      NoticeService.page(val, 5)
        .then(res => {
          this.tableData = res.notices
          this.total = res.total
        })
    },
    rowClick: function (row, event, column) {
      NoticeService.one(row.id)
        .then(res => {
          this.notice = res.notice
          this.dialogVisible = true
        })
    },
    getPosts: function (val) {
      PostService.pageMe(val, 5)
        .then(res => {
          this.tableData = res.posts
          this.total = res.total
        })
    },
    getMsgs: function (val) {
      MsgService.pageMe(val, 5)
        .then(res => {
          this.tableData = res.msgs
          this.total = res.total
        })
    }
  }
}
</script>

<style scoped>
  .card-subtitle {
    font-size: 13px;
    color: #999;
  }

  .card-bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .card-button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .table-expand el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
